<template>
	<Box title="总交易额(元)">
		<ul class="money">
			<li class="item" v-for="(item, index) in m1.centre.money" :key="index">
				<p class="unit">{{ unit[index] }}</p>
				<p class="number">{{ item }}</p>
			</li>
		</ul>
		<ul class="list">
			<li class="item" v-for="(item, index) in m1.centre.list" :key="index">
				<p class="number">{{ item.number }}</p>
				<p class="title">{{ item.title }}</p>
			</li>
		</ul>
		<div id="m1_cen_ecs" />
	</Box>
</template>

<script setup>
	import Box from '@com1/Box.vue';
	import * as ecs from 'echarts';
	import { m1Store } from '@st/m1';
	import { onMounted, reactive } from 'vue';
	import ChinaMap from '@json/ChinaMap.json';
	
	const m1 = m1Store();
	const unit = reactive(['十亿', '亿', '千万', '百万', '十万', '万', '千', '百', '十', '个']);
	
	onMounted(() => {
		m1.getCentre(ChinaMap);
		const chart = ecs.init(document.getElementById('m1_cen_ecs'));
		ecs.registerMap('ChinaMap', ChinaMap);
		chart.setOption({
			geo: {
				type: 'map',
				map: 'ChinaMap',
				roam: true,
				regions: m1.centre.regions,
				zoom: 1.6,
				center: [104.9376, 34.3489],
				emphasis: {
					disabled: false,
					itemStyle: {
						areaColor: 'none',
						borderColor: '#fbc015',
					},
					label: {
						color: '#FFF'
					}
				}
			},
			series: [{
				type: 'scatter',
				coordinateSystem: 'geo',
				data: [
					{ name: '北京', value: [116.404269, 39.915156] },
					{ name: '哈尔滨', value: [126.63752, 45.766483] },
					{ name: '长春', value: [125.331784, 43.919566] },
					{ name: '沈阳', value: [123.462184, 41.682968] },
				],
				symbol: 'path://M173.936129 935.205206L36.574824 67.590831C39.500518 38.772752 55.006693 21.364876 83.239634 15.367205c208.455654-38.399726 351.741488-6.070814 543.374404 110.956921 171.738202 87.551375 244.075971 65.901244 295.275606 50.1025 7.314233-2.267412 26.184956-10.093642 47.030521 4.315397 12.946193 8.923365 20.699281 21.9427 17.919872 44.397397-1.097135 9.06965-44.17797 168.812508-129.242506 479.155435-12.068485 21.796416-34.011186 34.596324-65.828101 38.399726-45.348248 5.33939-77.969729-3.949686-156.524596-41.544846-87.917086-42.056842-132.241341-88.35594-233.104621-96.840451-45.787102-3.803401-98.742152-1.828558-141.60356 20.99185a62.170984 62.170984 0 0 0-30.792923 34.230612c-5.851387 16.091314-5.193106 25.965529-4.973678 34.815752 6.436525 50.175642 28.891222 179.345005 36.35174 238.73658a43.958543 43.958543 0 0 1-87.185663 2.19427z',
				symbolSize: 20,
				color: '#F00'
			}, {
				type: 'scatter',
				coordinateSystem: 'geo',
				data: [
					{ name: '天津', value: [117.202342, 39.091327] },
					{ name: '扎赉特旗', value: [122.905872, 46.729783] },
					{ name: '威海', value: [122.13836, 37.518932] },
				],
				symbol: 'path://M89.315556 394.808889l184.888888-187.164445a28.444444 28.444444 0 0 1 20.195556-8.533333h435.768889a28.444444 28.444444 0 0 1 20.195555 8.533333l184.888889 187.164445a28.444444 28.444444 0 0 1 1.564445 38.257778l-413.866667 492.657777a14.222222 14.222222 0 0 1-20.053333 1.706667l-1.848889-1.706667L87.751111 433.066667a28.444444 28.444444 0 0 1 1.564445-38.257778z',
				symbolSize: 20,
				color: '#FCC422'
			}],
		})
	})
</script>

<style lang="less">
@import "@less";
.money {
	.df();
	.f_jc();
	gap: 14px;
	.item {
		.tac();
		.unit {
			.c(@c_font);
			.font(12px);
			.mar_b(4px);
		}
		.number {
			.padd(4px, 10px);
			.bg(@c_vuyc);
			.c(white);
			.font(22px);
			.bor_r(4px);
		}
	}
}
.list {
	.df();
	.f_jc();
	.marg(20px, 0);
	gap: 20px;
	.item {
		.size(100px, 70px);
		.padd(10px, 0);
		.tac();
		.bg(#152149);
		.number {
			.c(@c_vuyc);
			.font(22px);
		}
		.title {
			.c(@c_font);
			.font(12px);
			.mar_t(4px);
		}
	}
}
#m1_cen_ecs {
	.size(100%, 420px);
}
</style>